<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,viewport-fit=cover"
    />
    <meta name="renderer" content="webkit" />
    <title>1000道pmp考试题练习器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
    <script src="js/data.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="swiper">
        <!-- 遮罩层 -->
        <transition name="animation">
          <div
            @click="onovelay"
            v-if="isShowsubjects||isShowFavorites"
            class="overlayBox"
          ></div>
        </transition>

        <!-- 成功提示 -->
        <transition name="animation">
          <div v-if="showToast" class="tipBox">成功!</div>
        </transition>

        <div class="header">
          <span class="GPT-box" @click="onAsk">问一问</span>
          <span class="numBox">第 {{curIndex}} 题</span>
          <span class="errBtn" @click="switchTopics"
            >{{allTopics?'收藏夹题目':'所有题目'}}</span
          >
        </div>
        <!-- 所有题集 -->
        <div v-if="allTopics" class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item,index) in allData"
            :key="index"
          >
            <div class="optBox">
              题目：
              <div class="imgBox" v-if="item.img">
                <image
                  class="img"
                  v-for="(itm,idx) in item.img"
                  :key="idx"
                  :src="itm"
                  alt="图片丢失"
                  mode="widthFix"
                >
                </image>
              </div>
              <div class="questionBox">{{item.id}}、{{item.question}}</div>
            </div>
            <div class="optsB">
              <div class="itemBox" @click="chooseOne('A',item.right)">
                A. {{item.options.A}}
              </div>
              <div class="itemBox" @click="chooseOne('B',item.right)">
                B. {{item.options.B}}
              </div>
              <div class="itemBox" @click="chooseOne('C',item.right)">
                C. {{item.options.C}}
              </div>
              <div class="itemBox" @click="chooseOne('D',item.right)">
                D. {{item.options.D}}
              </div>
            </div>
            <div
              v-show="isShowJiexi"
              :class="isRight?'jiexiBox active' : 'jiexiBox'"
            >
              <div>{{isRight?'回答正确':'回答错误'}}</div>
              <div class="yourChoose">
                <span>您选：{{yourSelection}}</span>
              </div>
              <div>{{item.analysis}}</div>
            </div>
          </div>
        </div>

        <!-- 错题集 -->
        <div v-else class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item,index) in errData"
            :key="index"
          >
            <div class="optBox">
              题目：
              <div class="imgBox" v-if="item.img">
                <image
                  class="img"
                  v-for="(itm,idx) in item.img"
                  :key="idx"
                  :src="itm"
                  alt="图片丢失"
                  mode="widthFix"
                >
                </image>
              </div>
              <div class="questionBox">{{item.id}}、{{item.question}}</div>
            </div>
            <div class="optsB">
              <div class="itemBox" @click="chooseOne('A',item.right)">
                A. {{item.options.A}}
              </div>
              <div class="itemBox" @click="chooseOne('B',item.right)">
                B. {{item.options.B}}
              </div>
              <div class="itemBox" @click="chooseOne('C',item.right)">
                C. {{item.options.C}}
              </div>
              <div class="itemBox" @click="chooseOne('D',item.right)">
                D. {{item.options.D}}
              </div>
            </div>
            <div
              v-show="isShowJiexi"
              :class="isRight?'jiexiBox active' : 'jiexiBox'"
            >
              <div>{{isRight?'回答正确':'回答错误'}}</div>
              <div class="yourChoose">
                <span>您选：{{yourSelection}}</span>
              </div>
              <div>{{item.analysis}}</div>
            </div>
          </div>
        </div>

        <!-- footer部分 -->
        <div class="footer">
          <span class="btnBox" v-if="allTopics" @click="isShowsubjects = true"
            >选题</span
          >
          <span class="btnBox" v-if="!allTopics" @click="isShowFavorites = true"
            >收藏夹</span
          >
          <span class="btnBox" @click="mySwiper.slidePrev()">上一题</span>
          <span class="btnBox" @click="mySwiper.slideNext()">下一题</span>
          <span class="btnBox" v-if="allTopics" @click="onCollection"
            >收藏</span
          >
          <span class="btnBox" v-if="!allTopics" @click="onUnCollection"
            >取消收藏</span
          >
          <!-- 所有题 -->
          <div :class="isShowsubjects?'chooseBox transitioned':'chooseBox'">
            <div class="titileBox">
              <div class="">题卡</div>
              <span class="closeBox" @click="isShowsubjects = false">X</span>
            </div>
            <div class="bigBox">
              <div
                class="topicBox"
                v-for="item in 1000"
                @click="mySwiper.slideTo(item-1)"
                :key="item"
              >
                {{item}}
              </div>
            </div>
          </div>
          <!-- 收藏题夹 -->
          <div :class="isShowFavorites?'chooseBox transitioned':'chooseBox'">
            <div class="titileBox">
              <div class="">收藏题卡</div>
              <span class="closeBox" @click="isShowFavorites = false">X</span>
            </div>
            <div class="bigBox">
              <div
                class="topicBox"
                v-for="(item,index) in collectionArr"
                :key="index"
                @click="mySwiper.slideTo(index)"
              >
                {{item}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
      new Vue({
        el: "#app",
        data() {
          return {
            curIndex: 1, //当前是第几题
            mySwiper: null, //
            isRight: false, //是否选择对了
            isShowJiexi: false, //
            isShowsubjects: false, //是否展示所有题目
            isShowFavorites: false, //是否展示所有收藏题夹
            allTopics: true, //是否展示所有题
            yourSelection: "", //你所选的答案
            collectionArr: [], //收藏列表
            dataMap: new Map(), //所有数据的map
            errData: [], //错题集
            showToast: false, //是否展示提示框
          };
        },
        created() {
          console.log(
            "%c 如果该程序能帮到您，请您为智能运维部点赞",
            "color:green"
          );
          this.collectionArr =
            JSON.parse(localStorage.getItem("collectionArr")) || [];
          this.allData.forEach((item) => this.dataMap.set(item.id, item));
          this.onPractice(); //生成错题集
        },
        mounted() {
          this.$nextTick(() => {
            this.initSwiper();
            //如果有上次做题的缓存就跳到那个题
            let hasIndexCache = localStorage.getItem("curIndex");
            if (hasIndexCache) this.mySwiper.slideTo(hasIndexCache - 1);
          });
        },
        // 计算属性有缓存
        computed: {
          allData() {
            return data;
          },
        },
        methods: {
          /**
           * 初始化swiper
           */
          initSwiper() {
            const { changePage, changeJiexiState } = this;
            this.mySwiper = new Swiper(".swiper", {
              direction: "horizontal",
              loop: false,
              on: {
                slideChangeTransitionEnd: (event) => changePage(event),
                slideChangeTransitionStart: (event) => changeJiexiState(event),
              },
            });
          },
          /**
           * 轮播图切换页面时的事件
           */
          changePage({ activeIndex }) {
            this.curIndex = this.allTopics
              ? activeIndex + 1
              : this.errData[activeIndex].id;
            if (this.allTopics) localStorage.setItem("curIndex", this.curIndex);
          },
          /**
           * 滑动之前关闭解析框
           */
          changeJiexiState() {
            this.isShowJiexi = false;
          },
          /**
           * 上一题
           */
          onPre() {
            this.mySwiper.slidePrev();
          },
          /**
           * 点击选项
           */
          chooseOne(yourSelection, right) {
            this.isShowJiexi = true;
            this.yourSelection = yourSelection;
            if (yourSelection === right) {
              this.isRight = true;
            } else {
              this.isRight = false;
            }
          },
          /**
           * 点击收藏
           */
          onCollection() {
            this.collectionArr.push(Number(this.curIndex));
            this.collectionArr = [...new Set(this.collectionArr)].sort();
            localStorage.collectionArr = JSON.stringify(this.collectionArr);
            this.onShowToast();
          },
          /**
           * 展示提示框
           */
          onShowToast() {
            this.showToast = true;
            let timer = setTimeout(() => {
              this.showToast = false;
              clearTimeout(timer);
            }, 1500);
          },
          /**
           * 取消收藏
           */
          onUnCollection() {
            //错误题集数组变更
            this.errData = this.errData.filter(
              (item) => item.id != this.curIndex
            );
            //错误题集id数组变更
            this.collectionArr = this.collectionArr.filter(
              (id) => id != this.curIndex
            );
            localStorage.collectionArr = JSON.stringify(this.collectionArr);
            this.onShowToast();
          },
          /**
           * 生成错题集
           */
          onPractice() {
            this.collectionArr =
              JSON.parse(localStorage.getItem("collectionArr")) || [];
            this.collectionArr.forEach((id) => {
              let one = this.dataMap.get(id + "");
              this.errData.push(one);
            });
          },
          /**
           * 切花换答题模式
           */
          switchTopics() {
            if (this.allTopics) {
              // 此时是进入错题集题目模式
              this.onPractice(); //生成错题集
            }
            this.allTopics = !this.allTopics;
          },
          /**
           * 点击遮罩层的事件
           */
          onovelay() {
            this.isShowsubjects = false;
            this.isShowFavorites = false;
          },
          /**
           * 向chatGPT提问
           */
          onAsk() {
            window.open(
              "https://yiyan.baidu.com/",
              "_blank",
              "width=800,height=600,toolbar=no,location=no"
            );
          },
        },
      });
    </script>
  </body>
</html>
